import { parse } from "./parse.js";
import { generate } from "./codegen.js";
export function compileToFunctions(template) {
  // 我们需要把html字符串变成render函数

  // 1.把html代码转成ast语法树  ast用来描述代码本身形成树结构 不仅可以描述html 也能描述css以及js语法
  // 很多库都运用到了ast 比如 webpack babel eslint等等
  let ast = parse(template);
  // 2.优化静态节点,标记那些永远不会改变的静态节点，基本为纯文本和纯元素
  // 在后续diff对比时，可以忽略静态节点的对比
  // 这个有兴趣的可以去看源码  不影响核心功能就不实现了
  
  // 3.通过ast 重新生成代码
  // 我们最后生成的代码需要和render函数一样
  let code = generate(ast);
  //   使用with语法改变作用域为this  之后调用render函数可以使用call改变this 方便code里面的变量取值
  let renderFn = new Function(`with(this){return ${code}}`);
  return renderFn;
}
